<template>
	<div class="gzmin">
		<div class="imgbox">
			<img src="../../static/images/gzimg_03.png">
		</div>
		<p>只有登录了，才能看到他们的动态！啊</p>
		<button @click="loginshow">立即登录</button>

		<div class="login" ref="loginbox">
			<div class="cha"><i class="iconfont rt" @click="close">&#xe629;</i></div>
				<ul>
					<li class="li1"><span><i class="iconfont">&#xe63f;</i></span></li>
					<li class="li2">微信登录</li>
					<li class="li3">or</li>
					<li class="li4">手机登录</li>
					<li class="li5">
						<i class="iconfont lt">&#xe65d;</i>
						<input type="text" name="tel" placeholder="请输入你的手机号" ref="tel" v-model="telcon" @blur="checkMobile">
						<span class="code rt" @click="getcode" ref="code" v-text="code"></span>
					</li>
					<li class="li6">
						<i class="iconfont lt">&#xe63d;</i>
						<input type="text" name="code" class="code" placeholder="请输入验证码" v-model="codecon">
					</li>
					<li class="li7"><button class="submit" @click="submit" ref="subbtn" disabled>登录</button></li>
				</ul>			
		</div>
	</div>	
</template>
<style type="text/css" lang="less" scoped>
	.gzmin{
		position: absolute;
		top: 40px;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100vh;
		background: #f6f6f6;
		overflow: hidden;
		.imgbox{
			margin: 60px auto 20px;
			width: 50%;
			height: 90px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		p{
				font-size: 13px;
				color: #22887d;
				margin:20px 0;
				text-align: center;
			}
			button{
				display: block;
				width: 120px;
				margin:0 auto;
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 12px;
				color: #22887d;
				background: #fff;
				border: 0.5px solid #22887d;
				border-radius: 4px;
				outline: none;
			}
	}
	.login{
		z-index: 9999;
		position: fixed;
		background: #fff;
		top: 0;
		right:-100vw;
		height: 100vh;
		width: 100vw;
		transition: all 0.5s linear;
		text-align: center;
		input{
			border: none;
			outline: none;
		}
		.cha{
			overflow: hidden;
			padding: 20px 40px; 
			i{
				font-size: 30px;
				color: #008B8B;
			}
		}
		li{
			text-align: left;
		}
		.li1{
			text-align: center;
			span{
				width: 80px;
				height: 80px;
				border-radius: 50%;
				overflow: hidden;
				background: #008B8B;
				text-align: center;
				line-height: 80px;
				display:inline-block;
				i{
					font-size: 50px;
					color: #fff;
				}
			}
		}
		.li2{
			font-size: 14px;
			color: #525252;
			text-align: center;
			padding: 10px 0;
		}
		.li3{
			position: relative;
			text-align: center;
		}
		.li3:before{
			position: absolute;
			top: 50%;
			content: "";
			height: 0.5px;
			background: #EAEAEA;
			width: 120px;
			left: 6%;
		}
		.li3:after{
			position: absolute;
			top: 50%;
			content: "";
			height: 0.5px;
			background: #EAEAEA;
			width: 120px;
			right: 6%;
		}
		.li4{
			text-align: center;
			border-bottom: 0.5px solid #EAEAEA;
			padding:4px 0 10px;
			font-size: 14px;
		}
		.li5{
			height: 40px;
			line-height: 40px;
			border-bottom: 0.5px solid #EAEAEA;
			padding: 0 10px;
			i{
				font-size: 26px;
				position: relative;
				/*top: 6px;*/
			}
			input{
				height: 30px;
				margin:5px 0;
				width: 60%;
			}
			input::-webkit-input-placeholder{
				color: #F7F7F7;
				font-size: 15px;
			}
			.code{
				height: 100%;		
				width: 80px;
				padding-left: 13px;
				text-align: center;
				display: inline-block;
				font-size: 12px;
				color: #008B8B;
				outline: none;
				background: none;
				border: none;
				border-left: 0.5px solid #EAEAEA;
			}
		}
		.li6{
			height: 40px;
			line-height: 40px;
			border-bottom: 0.5px solid #EAEAEA;
			padding: 0 10px;
			text-align: left;
			i{
				font-size: 22px;
				position: relative;
				left: 2px;
				margin-right:10px;
				position: relative;
				/*top: 8px;*/
			}
			input{
				height: 30px;
				width: 55%;
				margin:5px 0;
			}
			input::-webkit-input-placeholder{
				color: #EAEAEA;
				font-size: 15px;
			}
		}
		.li7{
			margin:14px 0;
			button{
				width: 80%;
				display: block;
				margin:0 auto;
				height: 44px;
				line-height: 44px;
				text-align: center;
				background: #008B8B;
				color: #fff;
				font-size: 14px;
				border-radius: 4px;
				border: none;
				outline: none;
			}
		}

	}
</style>

<script type="text/javascript">
import { mapState,mapGetters} from 'vuex'
	export default{
		data(){
			return{
				autofocus:"autofocus",
				code:"发送验证码",
				telcon:"",
				codecon:""
			}
		},
		components:{

		},
		computed:{
			...mapState(['userstel']),
			...mapGetters(['flag'])
		},
		methods:{
			loginshow(){
				this.$refs.loginbox.style.right="0";
				// this.$refs.tel.focus();
			},
			close(){
				this.$refs.loginbox.style.right="-100vw";
			},
			getcode(){	   
		        var code = "";     
		        var selectChar=[];
				//console.log(selectChar.length)62
				for(var i=48;i<=57&&i>=48;i++){
					//数字48-57
					selectChar.push(String.fromCharCode(i));
				}
				for(var i=65;i<=90&&i>=65;i++){
					//大写65-90
					selectChar.push(String.fromCharCode(i));
				}
				for(var i=97;i<=122&&i>=97;i++){
					//小写97-122
					selectChar.push(String.fromCharCode(i));
				}
				//console.log(selectChar);
		        for(var i=0;i<4;i++){   
		        var charsIn=Math.floor(Math.random()*selectChar.length);
		        code+=selectChar[charsIn];   
		        }
		        this.code=code; 
			},
			submit(){
			   	if(this.userstel.includes(this.telcon) && this.codecon.toLowerCase()==this.code.toLowerCase()){
			   		  this.$store.commit('toTrue');
			   		  window.location.href='/#/flower';
			   	}
			   	else{
			   		alert("登录失败！")
			   		this.telcon="";
			   		this.codecon=""
			   		this.$store.commit('toTrue');
			   		this.$refs.subbtn.disabled=this.flag;
			   		this.getcode()
			   	}  
			},
			 checkMobile(){ 
			 var sMobile = this.telcon
			 if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile))){ 
		  	  alert("不是完整的11位手机号或者正确的手机号前七位");
		  	  // this.$refs.tel.focus(); 
			  return false; 
			 }
			 else{
			 	this.$store.commit('toFalse');
			 	this.$refs.subbtn.disabled=this.flag;
			 } 
			}
		},
		mounted(){

		}
	}
</script>